The <textarea> element in HTML is used to create multi-line text input fields in a form. Unlike the <input> element with type="text", which allows users to enter only a single line of text, the <textarea> element lets users input multiple lines of text, making it ideal for:
Comments or feedback sections
Message boxes
Code editors
Long-form user inputs
Basic Syntax of <textarea>
The <textarea> element is a container tag, meaning it has an opening and closing tag.
The <label> element associates the textarea with a description.
The id attribute connects the label to the textarea for better accessibility.
The name attribute is used to identify the input data when submitting the form.
By default, a <textarea> is small and only a few lines tall, but you can control its size using attributes like rows and cols, or with CSS styling.
The rows and cols Attributes
The rows and cols attributes define the height (number of text lines) and width (number of characters per line) of the <textarea>.
rows="5" → The textarea will have 5 visible rows (height).
cols="30" → The textarea will have 30 character spaces per line (width).
However, using rows and cols is not always ideal. Instead, CSS styling with width and height is more flexible.
Placeholder Text in <textarea>
The placeholder attribute displays temporary text inside the textarea, which disappears when the user starts typing.
Styling the <textarea> with CSS
The default <textarea> design is plain. You can style it with CSS to make it more attractive.
width: 100% → Makes it responsive.
border: 2px solid #007BFF → Gives it a blue border.